<template>
  <div class="detail-part">
    <div class="info">
      <div class="title-block">项目信息</div>
      <div class="section">
        <el-row>
          <el-col :span="colSpan.label">项目名称</el-col>
          <el-col :span="22" v-text="projectInfo.projectName"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label">项目分类</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.projectType"></el-col>
          <el-col :span="colSpan.label">工程性质</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.projectXingZhi"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label">总投资</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.zongTouZi"></el-col>
          <el-col :span="colSpan.label">工程概算</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.projectGaiSuan"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label">资金来源</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.fundSources"></el-col>
          <el-col :span="colSpan.label">建设阶段</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.buildStage"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label">建设性质</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.buildXingZhi"></el-col>
          <el-col :span="colSpan.label">建设迄止年限</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.buildNianXian"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label">开工日期</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.kaiGongDate"></el-col>
          <el-col :span="colSpan.label">竣工日期</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.junGongDate"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label">纬度</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.mapLat"></el-col>
          <el-col :span="colSpan.label">经度</el-col>
          <el-col :span="colSpan.value" v-text="projectInfo.mapLng"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label">工程位置</el-col>
          <el-col :span="22"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label">建设规模及内容</el-col>
          <el-col :span="colSpan.value" ></el-col>
        </el-row>
      </div>
    </div>
    <div class="pi-fu">
      <div class="title-block">项目批复情况</div>
      <div class="section">
        <el-row>
          <el-col :span="colSpan.label1">项目建议书批复文号</el-col>
          <el-col :span="colSpan.value1"></el-col>
          <el-col :span="colSpan.label1">项目可行性研究批复文号</el-col>
          <el-col :span="colSpan.value1" v-text="projectInfo.kexingxingyanjiu"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label1">项目初步设计批复文号</el-col>
          <el-col :span="colSpan.value1" v-text="projectInfo.chubusheji"></el-col>
          <el-col :span="colSpan.label1">项目实施方案批复文号</el-col>
          <el-col :span="colSpan.value1"></el-col>
        </el-row>
        <el-row>
          <el-col :span="colSpan.label1">项目财政评审批复文号</el-col>
          <el-col :span="colSpan.value1" v-text="projectInfo.caiZhengpingshen"></el-col>
        </el-row>
      </div>
    </div>
    <div class="part-footer">
      <el-button type="primary">编辑项目信息</el-button>
    </div>
  </div>
</template>

<script>
  import controllerAPI from '@/api/project/controller'
  export default {
    name: 'BasicInfo',
    data() {
      return {
        projectInfo:{
          projectId:this.$route.params.proId
        },
        colSpan:{
          label:2,
          value:10,
          label1:3,
          value1:9
        }
      }
    },
    created() {
      this.getInfo()
    },
    methods: {
      getInfo(){
        controllerAPI.getById(this.projectInfo.projectId).then(res=>{
          console.log(res.result)
          this.projectInfo = res.result
        })
      }
    }
  }
</script>

<style scoped lang="scss">

  .title-block {
    color:#515151;
    font-weight: bold;
    border-left: 4px solid #009688;
    line-height: 30px;
    padding-left: 10px;
    /*border-bottom: 1px solid #eee;*/
    background-color: #eee;
  }
  .section {
    padding: 10px 0;
  }

  .info,.pi-fu {
    line-height: 40px;
    font-size: 14px;
    color:gray;
    .el-row {
      .el-col:nth-of-type(odd) {
        text-align: right;
      }
      .el-col:nth-of-type(even) {
        padding-left: 20px;
        box-sizing: border-box;
        border: 1px solid transparent;
      }
    }
  }

  .part-footer {
    border-top: 1px solid #eee;
    text-align: center;
    line-height: 60px;
  }
</style>
